.wrap-box {
    width: 100%;
    height: auto;
    perspective: 800px;
}

/* 核心容器 */
.box-content {
    width: 200px;
    height: 200px;
    margin: 16em auto 10em;
    /*表示所有子元素在3D空间中呈现。*/
    transform-style: preserve-3d;
    -webkit-transform-style: preserve-3d;
    position: relative;
    /* infinite   规定动画应该无限次播放 */
    /* linear  线性过度*/
    animation: rotate 8s infinite linear;
    /* animation: rotate 10s infinite alternate; */
    /* alternate   动画应该轮流反向播放 */
    transform: rotateX(20deg) rotateY(-20deg);
}




@keyframes rotate {
    0% {
        transform: rotateX(20deg) rotateY(0deg);
    }

    50% {
        transform: rotateX(20deg) rotateY(180deg);
    }

    100% {
        transform: rotateX(20deg) rotateY(360deg);
    }
}

@-webkit-keyframes rotate {
    0% {
        -webkit-transform: rotateX(20deg) rotateY(0deg);
    }

    50% {
        -webkit-transform: rotateX(20deg) rotateY(180deg);
    }

    100% {
        -webkit-transform: rotateX(20deg) rotateY(360deg);
    }
}

.box-content div img {
    width: 100%;
    height: 100%;
}

.box-content div {
    position: absolute;
    transition: all 0.3s ease;
    left: 0;
}

/* 外层div */
/* 表示div里面以l开头的都选择 */
.box-content div[class^="l"] {
    width: 200px;
    height: 200px;
    opacity: 0.7;
    /* opacity: 1; */
    top: 0;
}

/* 中间div */
.box-content div[class^="m"] {
    width: 150px;
    height: 150px;
    opacity: 1;
    top: 30px;
}

/* 内层div */
.box-content div[class^="s"] {
    width: 100px;
    height: 100px;
    opacity: 0;
    top: 50px;
}

.box-content:hover div[class^="l"] {
    top: 0;
}

.box-content:hover div[class^="m"] {
    opacity: 1;
}

.box-content:hover div[class^="s"] {
    opacity: 1;
}

/* 上方元素 */
.box-content .l-bead {
    transform: translateY(-100px) rotateX(90deg);
    -webkit-transform: translateY(-100px) rotateX(90deg);
    /* display: none; */
}

/* 下方元素 */
.box-content .l-body {
    transform: translateY(100px) rotateX(90deg);
    -webkit-transform: translateY(100px) rotateX(90deg);
}

/* 前方元素 */
.box-content div[class*="front"] {
    transform: translateZ(100px);
    -webkit-transform: translateZ(100px);
}

/* 左边元素 */
.box-content div[class*="left"] {
    /* rotate 旋转 */
    transform: translateX(-100px) rotateY(-90deg);
    -webkit-transform: translateX(-100px) rotateY(-90deg);
}

/* 后方元素 */
.box-content div[class*="back"] {
    transform: translateZ(-100px);
    -webkit-transform: translateZ(-100px);
}

/* 右边元素 */
.box-content div[class*="right"] {
    transform: translateX(100px) rotateY(90deg);
    -webkit-transform: translateX(100px) rotateY(90deg);
}

/* 中间盒子元素 */
.wrap-box .box-content .middle-f {
    transform: translateZ(75px) translateX(20px);
    -webkit-transform: translateZ(75px) translateX(25px);
}

.wrap-box .box-content .middle-l {
    transform: translateX(-50px) rotateY(-90deg);
    -webkit-transform: translateX(-50px) rotateY(-90deg);
}

.wrap-box .box-content .middle-b {
    transform: translateZ(-75px) translateX(25px);
    -webkit-transform: translateZ(-75px) translateX(25px);
}

.wrap-box .box-content .middle-r {
    transform: translateX(100px) rotateY(90deg);
    -webkit-transform: translateX(100px) rotateY(90deg);
}

/* 上方散开 */
.box-content:hover div.l-bead {
    transform: translateY(-150px) rotateX(90deg);
    -webkit-transform: translateY(-150px) rotateX(90deg);
}

/* 下方散开 */
.box-content:hover div.l-body {
    transform: translateY(150px) rotateX(90deg);
    -webkit-transform: translateY(150px) rotateX(90deg);
}

/* 前方散开 */

.box-content:hover div.l-front {
    transform: translateZ(250px);
    -webkit-transform: translateZ(250px);
}

.box-content:hover div.m-front {
    transform: translateZ(150px);
    -webkit-transform: translateZ(150px);
}

.box-content:hover div.s-front {
    transform: translateZ(50px);
    -webkit-transform: translateZ(50px);
}

/* 左边散开 */
.box-content:hover div.l-left {
    transform: translateX(-250px) rotateY(-90deg);
    -webkit-transform: translateX(-250px) rotateY(-90deg);
}

.box-content:hover div.m-left {
    transform: translateX(-150px) rotateY(-90deg);
    -webkit-transform: translateX(-150px) rotateY(-90deg);
}

.box-content:hover div.s-left {
    transform: translateX(-50px) rotateY(-90deg);
    -webkit-transform: translateX(-50px) rotateY(-90deg);
}

/* 后方散开 */
.box-content:hover div.l-back {
    transform: translateZ(-250px);
    -webkit-transform: translateZ(-250px);
}

.box-content:hover div.m-back {
    transform: translateZ(-150px);
    -webkit-transform: translateZ(-150px);
}

.box-content:hover div.s-back {
    transform: translateZ(-50px);
    -webkit-transform: translateZ(-50px);
}

/* 右放散开 */
.box-content:hover div.l-right {
    transform: translateX(250px) rotateY(90deg);
    -webkit-transform: translateX(250px) rotateY(90deg);
}

.box-content:hover div.m-right {
    transform: translateX(150px) rotateY(90deg);
    -webkit-transform: translateX(150px) rotateY(90deg);
}

.box-content:hover div.s-right {
    transform: translateX(50px) rotateY(90deg);
    -webkit-transform: translateX(50px) rotateY(90deg);
}